/**
 * Created by JLB1 on 2017/2/7.
 */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import AJAX from '../../lib/ajax';
import Toast from "../MyPackage/components/Toast"

require('../../styles/common.less');
require('../../styles/lux.less');
require('../../styles/resetWeui.less');
require('./TaobaoCode.less');

class TaobaoCode extends Component {

  state = {
    code: '',
  };

  componentDidMount() {
    AJAX.request('get_tao_code', {}, data => {
      this.setState({
        code: data.body || '',
      });
    });
  }

  changeCode = e => {
    this.setState({
      code: e.target.value,
    })
  }

  handleSubmit = () => {
    let { code } = this.state;
    code = code.replace(/[\r\n]/g, '').trim();
    if (code.charAt(code.length - 1) == ',') {
      code = code.substring(0, code.length - 1);
    }

    // if (!code) {
    //   Toast.error({ content: '口令不能为空' });
    //   return;
    // }

    AJAX.request('save_tao_code', { tao_code: code }, data => {
      if (data.code == 0) {
        Toast.success({ content: '保存成功' });
      }
    })
  }

  render() {
    const { code } = this.state;

    return (
      <div>
        <div className="code-content">
          <div className="title-content">
            <h1>淘宝口令配置</h1>
            <h3>(多个用逗号隔开)</h3>
          </div>

          <div className="code-box">
            <textarea rows="15" value={code} onChange={this.changeCode}></textarea>
          </div>
        </div>

        <div className="footer-box">
          <div className="footer-btn-box">
            <button
              className="footer-btn"
              onClick={this.handleSubmit}
            >
              提交
            </button>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<TaobaoCode />, document.getElementById('app'));

if (module.hot) {
  module.hot.accept();
}